<template>
  <div id="TimerShaft">
    <div class="left" ref="leftBox">
      <div v-for="(item, index) in data" :key="index" class="item" ref="item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </div>
    </div>
    <div class="line"></div>
    <div class="right" ref="rightBox"></div>
  </div>
</template>

<script>
export default {
  name: 'TimerShaft',
  props: {
    data: {
      type: Array,
      require: true,
    },
  },
  mounted() {
    this.initDomList();
  },
  methods: {
    //插入某一边盒子
    insertBox(doms, pos) {
      doms.forEach((item) => {
        this.$refs[pos].appendChild(item);
      });
    },
    //获取某元素的高度
    getRectHeight(dom) {
      return dom.getBoundingClientRect().height;
    },
    //初始化dom位置
    initDomList() {
      let curDom = this.$refs.item; //当前需要操作的dom集合
      let rightBoxHeight = 0; //定义rightBoxHeight在循环中使用 -- 右边的容器的高度
      let leftBoxHeight = 0; //定义rightBoxHeight在循环中使用 -- 左边容器的高度
      let itemH = 0; //判断是否插入到另外一边盒子的依据 -- itemH > 另外一边的总高度就要将剩下的插入到对面,然后再进行下一步处理
      let pos = ''; // 当前所属的位置 --- 向右盒子插/向左盒子插
      while (curDom.length) {
        // 所有当前需要操作的dom集合都操作完了，循环结束
        //每次都需要获取新的高度 -- 和操作dom的盒子相反的盒子的一边
        // debugger;
        // await this.sleep(100);
        // console.log(curDom)
        rightBoxHeight = this.getRectHeight(this.$refs.rightBox);
        leftBoxHeight = this.getRectHeight(this.$refs.leftBox);
        itemH = 0; //每一次循环都代表重新计算一次需要操作的盒子的高度
        itemH += curDom[0].offsetTop; //加上当前操作curDom中第一个盒子以上的高度再进行判断
        pos = leftBoxHeight < rightBoxHeight ? leftBoxHeight : rightBoxHeight; //curDom的高度和哪一边的盒子进行判断
        for (let index = 0; index < curDom.length; index++) {
          //循环累加，加到超过对面盒子就插入到对面
          itemH += this.getRectHeight(curDom[index]);
          //只要大于对面的盒子,就进行放入对面
          if (itemH > pos) {
            curDom = curDom.slice(index + 1); //去掉操作完成的item盒子
            if (rightBoxHeight > leftBoxHeight) {
              //这条判断往那边盒子循环插入所有需要操作的盒子，肯定往高度小的一边插入
              this.insertBox(curDom, 'leftBox'); //插入操作
            } else {
              this.insertBox(curDom, 'rightBox'); //插入操作
            }
            break; //操作完成直接结束当前循环
          }
        }
      }
      this.$refs.rightBox.style.paddingTop = '20px'; //循环结束右边加上初始padding
    },
    sleep(time) {
      return new Promise((reolse) =>
        setTimeout(() => {
          reolse();
        }, time)
      );
    },
  },
};
</script>

<style lang="less">
#TimerShaft {
  * {
    margin: 0;
    padding: 0;
  }
  display: flex;
  margin: 0 auto;
  width: 1200px;
  align-items: flex-start;
  .line {
    width: 10px;
    border-radius: 10px;
    background: rgb(85, 85, 85);
    align-self: stretch;
  }
  p {
    width: 400px;
  }
  h3 {
    position: relative;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    &::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 10px;
      background: #e0e0e0;
      top: calc(50% - 5px);
    }
  }
  .left,
  .right {
    position: relative;
  }
  .left {
    h3 {
      text-align: right;
      padding-right: 40px;
      &::after {
        right: 0;
      }
    }
  }
  .right {
    box-sizing: border-box;
    h3 {
      text-align: left;
      padding-left: 40px;
      &::after {
        left: 0;
      }
    }
  }
}
</style>
